<template>
  <div id="questionnaireBack">
    <div> <!--vue组件中不能存在多个div并行-->
      <div style="padding: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="searchData.Name"></el-input>
        <!--            <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
                    <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>-->
<!--        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>-->
<!--        <el-button type="warning" @click="reset">重置</el-button>-->
        <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索 </el-button>
        <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>
      </div>

      <div style="margin: 10px 0;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item style="margin-top: 33px">
            <button class="icon-btn add-btn" @click="createQuestionnaire">
              <div class="add-icon"></div>
              <div class="btn-txt">创建问卷</div>
            </button>
          </el-form-item>
          <el-form-item >
            <el-popconfirm
                    class="ml-5"
                    title="您确定删除吗？"
                    @confirm="delBatch"
            >
              <button class="noselect" slot="reference">
                <span class="text" >批量删除</span>
                <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
              </button>
            </el-popconfirm>
          </el-form-item>
        </el-form>


        <el-button style="margin-left: 700px" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>
        <el-button >导出<i class="el-icon-top"></i> </el-button>

      </div>
<!--      <div style="margin: 10px 0">-->
<!--        <el-button @click="createQuestionnaire">创建问卷</el-button>-->
<!--        <el-popconfirm-->
<!--            class="ml-5"-->
<!--            title="您确定删除吗？"-->
<!--            @confirm="delBatch"-->
<!--        >-->
<!--          <el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i> </el-button>-->
<!--        </el-popconfirm>-->
<!--        <el-button type="danger" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>-->
<!--        <el-button type="danger">导出<i class="el-icon-top"></i> </el-button>-->
<!--      </div>-->
      <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="70">
        </el-table-column>
        <el-table-column prop="name" label="问卷名称" width="140">
        </el-table-column>
        <el-table-column prop="instructions" label="问卷介绍" width="140">
        </el-table-column>
        <el-table-column prop="state" label="生成链接" width="140">
          <template slot-scope="scope">
          <el-button @click="handleLink(scope.row)"><img  src="@/assets/推广中.png" style="width: 30%"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <button class="edit" @click="handleEdit(scope.row)" style="margin-top: 5px">
              <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
                <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
              </svg>编辑</button>
            <el-popconfirm
                    width="200"
                    class="ml-5"
                    title="您确定删除吗？"
                    confirm-button-type="primary"
                    @confirm="handleDel(scope.row.id)"
            >
              <button class="noselect"  style="border-radius: 50px;" slot="reference">
                <span class="text" style="font-size: 13px;font-weight: normal;">删  除</span>
                <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
              </button>
            </el-popconfirm>
<!--            <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i> </el-button>-->
<!--            <el-popconfirm-->
<!--                class="ml-5"-->
<!--                title="您确定删除吗？"-->
<!--                @confirm="handleDel(scope.row.id)"-->
<!--            >-->
<!--              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
<!--            </el-popconfirm>-->
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {forEach} from "core-js/stable/dom-collections";

export default {
  name: "QuestionnaireManage",
  data(){
    return{
      tableData: [],
      total:0,
      searchData:{},
      Name:"",
      pageNum:1,
      pageSize:5,
      dialogFormVisible:false,
      form:{},
      multipleSelection:[],
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods:{
    createQuestionnaire(){
      window.open(`/designQuestionnaire.html`)
    },
    load(){
      this.request.get("http://localhost:9090/questionnaire/page",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          Name:this.searchData.Name
        }
      }).then(res =>{
        this.tableData=res.records
        this.total=res.total
      })
    },
    save(){
      if(this.form.id==null){
        this.form.type = "questionnaire"
        this.form.state = 1
      }
      this.request.post("http://localhost:9090/questionnaire/save",this.form).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.pageNum=Math.floor(this.total/this.pageSize+1)
          this.reset()
          this.$message.success("保存成功")
        } else{
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd(){
      this.form={}
      this.dialogFormVisible=true;
    },
    handleEdit(row){
      window.open("/designQuestionnaire.html?Id=" + row.id)
      this.form=row
      this.dialogFormVisible=true;
    },
    handleDel(id){
      this.request.delete("http://localhost:9090/questionnaire/"+id).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v=> v.id)
      this.request.post("http://localhost:9090/questionnaire/del/batch",ids).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    reset(){
      this.searchData= {}
      this.load()
    },
    cancel(){
      this.dialogFormVisible=false
      this.load()
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    handleLink(val){
      alert("答题链接为:http://localhost:8080/previewQuestionnaire.html?id="+val.id+"&eORp=1");
    }
  }
}
</script>

<style scoped>

</style>